<template>
  <div class="underwear-card-price" v-if="props.price">
    <div>售价：88.88元</div>
    <div>领取次数：3次</div>
  </div>
  <div class="is-open-sell" v-if="typeof props.isOpen === 'boolean'">
    <span :style="isOpen && 'color:#999'">否</span>
    <div>
      <n-switch :default-value="isOpen" @update:value="update" />
    </div>
    <span :style="!isOpen && 'color:#999'">是</span>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: ['price', 'isOpen']
}
</script>
<script setup>
import { ref, watchEffect } from 'vue';
const props = defineProps();
let isOpen;
if (typeof props.isOpen === 'boolean') {
  isOpen = ref(false);
  watchEffect(() => {
    isOpen.value = props.isOpen;
  })
}

const update = (e) => {
  isOpen.value = e;
}
</script>
<style lang="less" scoped>
.underwear-card-price {
  padding: 48px 0 48px 20px;
  width: 100%;
  box-sizing: border-box;

  >div {
    font-size: 24px;
    color: #4A5060;
    line-height: 1;
  }

  >div:first-child {
    margin-bottom: 17px;
  }
}

.is-open-sell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  >div {
    margin: 0 11px 0 16px;

    /deep/ .n-switch {
      zoom: 2.55;

      &:focus .n-switch__rail {
        box-shadow: none;
      }

      &.n-switch--active {
        .n-switch__rail {
          background-color: #1ABD69;
        }
      }

      .n-switch__rail {
        background-color: #D8D8D8;
      }
    }
  }


}
</style>